/**
 * Created by ZFL on 2018/1/3.
 */
/**
 * Created by ZFL on 2018/1/3.
 */
function PageInit(){

}

var imgBase='';
var navigateImage=[];    //存放门店形象图图片(不包括空值)
var navigateUrl=[];    //存放门店形象图图片(包括空值)
//先判断下是否存在门店形象图   如果存在    渲染在页面上
if($.getStorage('navigateImage')){
    var figureArr = [];
    figureArr = $('.figureImg .firstImg .img');
    navigateImage=$.parseJSON($.getStorage('navigateImage'))
    navigateImage.forEach(function (val, ind) {
        if (val == '') {
            val = '../../b2c/images/squadron/submit.png'
            console.log(val)
            $(figureArr[ind]).siblings('.del').hide();
        } else {

            $(figureArr[ind]).css({
                'background-image':'url('+val+')'
            })
            $(figureArr[ind]).siblings('.del').show();     //将原生js元素转换成jq元素    找到兄弟元素
            //console.log($(figureArr[ind]).siblings('.del'));
            navigateUrl.push(val);
            $('.storeFigure .completeBtn').show();
            $('.uploadFigure div').css({
                border: '1px solid #fd4568'
            })
        }

    })     //门店形象图
}

//上传图片
function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image;
    quality=0.6, //image quality
        img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var width = img.width;
        var height = img.height;
        // 按比例压缩6倍
        var rate = (width<height ? width/height:height/width)/6;
        canvas.width = width*rate;
        canvas.height = height*rate;
        ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);

        var dataURL = canvas.toDataURL(outputFormat || 'image/png',quality);
        callback.call(this, dataURL);
        canvas = null;
    };
    img.src = url;
}

function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) {  // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined){       // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL!=undefined) { // web_kit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

$('.uploadImg input').change(function(){
    var _this=this;
    var imageUrl = getObjectURL($(this)[0].files[0]);
    convertImgToBase64(imageUrl, function(base64Img){
        //img_area.innerHTML = '<img src="' + base64Img + '" alt=""/>';
        $($(_this).prev('span')[0]).css({
            'background-image':'url('+base64Img+')'
        });
        // base64转图片不需要base64的前缀data:image/jpg;base64
        // alert(base64Img.split(",")[1]);
        $(_this).siblings('.del').show();
        suffix=base64Img.split(';')[0].split('/')[1];
        //imgObj.suffix=suffix;
        imgBase=base64Img.split(',')[1];
        //imgObj.catalog=2;
        var index=$(_this).parents('.image').index();
        console.log(index)
        uploadnavigateUrls(index);

    });
})

function uploadnavigateUrls(index){
    $.ajaxHandler({
        model:function(){
            var obj={};
            obj.catalog=2;
            obj.imgBase=imgBase;
            obj.suffix=suffix;
            return obj;
        },
        visibleTime: 0,
        dataType: "json",
        approve: true,
        api: 'yg_baijiaappgoods/common/imageBasePath',
        success:function(res){
            if(res.code==10000){
                var data=res.data;
                navigateUrl[index]=data;
                urlNum()
                isShowBtn()

            }else{
                YDUI.dialog.toast(res.message,1000)
            }
        }
    })
}
var navigateUrlL=0;     //门店形象图片的个数
//删除按钮
$('.uploadImg .del').click(function(){
    var that=this;
    var index=$(this).parents('.image').index();
    navigateUrl.splice(index,1,'')
    urlNum();
    $($(this).siblings('span')[0]).css({
        'background-image':'url(../../b2c/images/squadron/submit.png)'
    })
    $(this).hide();
    isShowBtn()
})
//计算门店形象图url的个数
function urlNum(){
    navigateUrlL=navigateUrl.length;
    navigateUrl.forEach(function(val,index){
        if(val==''){
            navigateUrlL--;
        }
    })
}
//判断完成按钮是否展示
function isShowBtn(){
    if(navigateUrlL>0){
        $('.completeBtn').show();
    }else {
        $('.completeBtn').hide();
    }
}
//点击完成   执行跳转
$('.completeBtn').click(function(){
    navigateImage=[];
    navigateUrl.forEach(function(val,ind){
        if(val!=''){
            navigateImage.push(val)
        }

    })
    console.log(navigateImage)
    $.setStorage('navigateImage',navigateImage)
    returnGo();    //返回上一页
})
